<template>
  <div class="svip-select">
    <div class="svip-select-wapper" @click="toggleSelect">
      <div class="wapper-left">
        <span class="left-text">SVIP</span>
      </div>
      <div class="wapper-right">
        <span class="right-text">{{ text }}</span>&nbsp;
        <img v-if="discountInfo.identity_type === INVALID_SVIP" src="../../assets/nochecked.png" />
				<img v-if="discountInfo.identity_type === USE_SVIP" src="../../assets/checked.png" />
				<i v-if="discountInfo.identity_type === NOUSE_SVIP" class="iconfont icon-zhixiang ML2"></i>
      </div>
    </div>
    <!-- 超级会员叠加优惠选择器 -->
    <select-item :showSelect="showSelect" :cutPrice="cutPrice" @closeSelect="showSelect = false" :options="options"
      @select="onSelect"></select-item>
  </div>
</template>

<script>
import SelectItem from './SelectItem';

const USE_SVIP = 1;
const NOUSE_SVIP = -1;
const INVALID_SVIP = 2;

export default {
  props: {
    discountInfo: Object
  },
  components: {
    SelectItem
  },
  computed: {
    options() {
      return [
        {
          label: '【超级会员价】折扣',
          text: '-',
          value: USE_SVIP,
        },
        {
          label: '不使用',
          text: '',
          value: NOUSE_SVIP,
        }
      ]
    },
    text() {
      const { identity_type, identity_invalid_reason, svip_discount } = this.discountInfo;
			switch (identity_type) {
				case INVALID_SVIP:
					return identity_invalid_reason
				case USE_SVIP:
					return `- ¥${(svip_discount / 100).toFixed(2)}`
				case NOUSE_SVIP:
				default:
					return `请选择`
			}
    }
  },
  data() {
    return {
      showSelect: false,
      USE_SVIP,
      NOUSE_SVIP,
      INVALID_SVIP,
      cutPrice: 10,
    }
  },
  watch: {
    discountInfo: {
      handler(v) {
        if (!v) return;
				const { svip_discount: svipDiscount, identity_type: selectSvip } = v;
				this.cutPrice = (svipDiscount / 100).toFixed(2);
				this.$emit('change', selectSvip, false);
      },
      immediate: true
    }
  },
  methods: {
    toggleSelect() {
      if (this.discountInfo?.identity_type === INVALID_SVIP) return
			this.showSelect = !this.showSelect
    },
    onSelect(item) {
			this.$emit('change', item, true);
		}
  }
}
</script>

<style scoped lang="less">
.svip-select {
  padding: 0 0.32rem;
  background-color: #fff;

  .svip-select-wapper {
    border-top: 0.01rem solid #eee;
    background: #fff;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333333;

    .wapper-left {
      padding: 0 0.04rem;
      border: 0 solid #010100;
      background: linear-gradient(90deg, #666666 0%, #3d3d3d 100%);
      border-radius: 0.06rem;
      height: 0.36rem;
      text-align: center;
      line-height: 0.36rem;
      transform: scale(0.9);
      -ms-transform: scale(0.9);
      /* IE 9 */
      -moz-transform: scale(0.9);
      /* Firefox */
      -webkit-transform: scale(0.9);
      /* Safari 和 Chrome */
      -o-transform: scale(0.9);
      /* Opera */
      width: 0.64rem;

      .left-text {
        font-size: .24rem;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        text-size-adjust: none;
        background: linear-gradient(90deg, #ffe4ad, #ffc266);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .right-text {
        color: #333333;
      }
    }

    .wapper-right {
      img {
        vertical-align: middle;
        width: 0.32rem;
        height: 0.32rem;
      }

    }
  }
}
</style>